<!DOCTYPE html>
<html>
<head>
    <base href="/">
    <title>Home</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <!--<link rel="stylesheet" href="layui/css/layui.css">-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Custom Theme files -->
    <!--theme-style-->
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <!--//theme-style-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="New Store Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!--fonts-->
    <!--<link href='http://fonts.useso.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>-->
    <!--<link href='http://fonts.useso.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>&lt;!&ndash;//fonts&ndash;&gt;-->
    <!-- start menu -->
    <link href="css/memenu.css" rel="stylesheet" type="text/css" media="all"/>
    <script type="text/javascript" src="js/memenu.js"></script>
    <script>$(document).ready(function () {
        $(".memenu").memenu();
    });</script>
    <script src="js/simpleCart.min.js"></script>
</head>
<body>
<!--header-->
<div class="header">
    <div class="header-top">
        <div class="container">
            <div class="search">
                <form action="shopping/goods" style="display: flex; gap: 8px;">
                    <input type="text" placeholder="Search" name="keywords">
                    <!--                    <input type="text" value="Search " onfocus="this.value = '';"-->
<!--                           onblur="if (this.value == '') {this.value = 'Search';}">-->
                    <button type="button" name="searchbtn" class="layui-btn layui-btn-sm layui-btn-primary" >搜索</button>
                </form>
            </div>
            <div class="header-left">
                <ul>
                    <li><a href="shopping/userinfo">User</a></li>
<!--                    <li><a href="shopping/login">Login</a></li>-->
<!--                    <li><a href="shopping/register">Register</a></li>-->

                </ul>
                <div class="cart box_1">
                    <a href="shopping/cart">
                        <h3>
                            <div class="total">
                                <span class="simpleCart_total"></span> (<span id="simpleCart_quantity"
                                                                              class="simpleCart_quantity"></span> items)
                            </div>
                            <img src="images/cart.png" alt=""/></h3>
                    </a>
                    <p><a href="javascript:;" class="simpleCart_empty">Empty Cart</a></p>

                </div>
                <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <div class="container">
        <div class="head-top">
            <div class="logo">
                <a href="shopping/index"><img src="images/logo.png" alt=""></a>
            </div>
            <div class=" h_menu4">
                <ul class="layui-nav memenu skyblue" name="fenlei" lay-filter="navMenu" style="background-color: rgba(204,204,204,0.4)">
                    <li class="active grid"><a class="color8" href="shopping/index">Home</a></li>

                    <!--				      <li><a class="color1" href="#">Men</a>-->
                    <!--				      	<div class="mepanel">-->
                    <!--						<div class="row">-->
                    <!--							<div class="col1">-->
                    <!--								<div class="h_nav">-->
                    <!--									<ul>-->
                    <!--										<li><a href="products.html">Accessories</a></li>-->
                    <!--										<li><a href="products.html">Bags</a></li>-->
                    <!--										<li><a href="products.html">Caps & Hats</a></li>-->
                    <!--										<li><a href="products.html">Hoodies & Sweatshirts</a></li>-->
                    <!--										<li><a href="products.html">Jackets & Coats</a></li>-->
                    <!--										<li><a href="products.html">Jeans</a></li>-->
                    <!--										<li><a href="products.html">Jewellery</a></li>-->
                    <!--										<li><a href="products.html">Jumpers & Cardigans</a></li>-->
                    <!--										<li><a href="products.html">Leather Jackets</a></li>-->
                    <!--										<li><a href="products.html">Long Sleeve T-Shirts</a></li>-->
                    <!--										<li><a href="products.html">Loungewear</a></li>-->
                    <!--									</ul>	-->
                    <!--								</div>							-->
                    <!--							</div>-->
                    <!--						</div>-->
                    <!--						</div>-->
                    <!--					  </li>-->

                    <!--				<li><a class="color4" href="blog.html">Blog</a></li>-->
                    <!--				<li><a class="color6" href="contact.html">Conact</a></li>-->
                </ul>
            </div>

            <div class="clearfix"></div>
        </div>
    </div>

</div>

<div class="banner">
    <div class="container">
        <script src="js/responsiveslides.min.js"></script>
        <script>
            $(function () {
                $("#slider").responsiveSlides({
                    auto: true,
                    nav: true,
                    speed: 500,
                    namespace: "callbacks",
                    pager: true,
                });
            });
        </script>
        <div id="top" class="callbacks_container">
            <ul class="rslides" id="slider">
                <li>

                    <div class="banner-text">
                        <h3>Lorem Ipsum is not simply dummy </h3>
                        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
                            classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a
                            Latin professor .</p>
                        <a href="shopping/goods">Learn More</a>
                    </div>

                </li>
                <li>

                    <div class="banner-text">
                        <h3>There are many variations </h3>
                        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
                            classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a
                            Latin professor .</p>
                        <a href="shopping/goods">Learn More</a>

                    </div>

                </li>
                <li>
                    <div class="banner-text">
                        <h3>Sed ut perspiciatis unde omnis</h3>
                        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
                            classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a
                            Latin professor .</p>
                        <a href="shopping/goods">Learn More</a>

                    </div>

                </li>
            </ul>
        </div>

    </div>
</div>

<!--&lt;!&ndash;content&ndash;&gt;-->
<!--<div class="content">-->
<!--    <div class="container">-->
<!--        <div class="content-top">-->
<!--            <h1>NEW RELEASED</h1>-->
<!--            <div class="grid-in">-->
<!--                <div class="col-md-4 grid-top">-->
<!--                    <a href="single.html" class="b-link-stripe b-animate-go  thickbox"><img class="img-responsive"-->
<!--                                                                                            src="images/pi.jpg" alt="">-->
<!--                        <div class="b-wrapper">-->
<!--                            <h3 class="b-animate b-from-left    b-delay03 ">-->
<!--                                <span>T-Shirt</span>-->
<!--                            </h3>-->
<!--                        </div>-->
<!--                    </a>-->

<!--                    <p><a href="single.html">Contrary to popular</a></p>-->
<!--                </div>-->
<!--                <div class="col-md-4 grid-top">-->
<!--                    <a href="single.html" class="b-link-stripe b-animate-go  thickbox"><img class="img-responsive"-->
<!--                                                                                            src="images/pi1.jpg" alt="">-->
<!--                        <div class="b-wrapper">-->
<!--                            <h3 class="b-animate b-from-left    b-delay03 ">-->
<!--                                <span>Shoe</span>-->
<!--                            </h3>-->
<!--                        </div>-->
<!--                    </a>-->
<!--                    <p><a href="single.html">classical Latin</a></p>-->
<!--                </div>-->
<!--                <div class="col-md-4 grid-top">-->
<!--                    <a href="single.html" class="b-link-stripe b-animate-go  thickbox"><img class="img-responsive"-->
<!--                                                                                            src="images/pi2.jpg" alt="">-->
<!--                        <div class="b-wrapper">-->
<!--                            <h3 class="b-animate b-from-left    b-delay03 ">-->
<!--                                <span>Bag</span>-->
<!--                            </h3>-->
<!--                        </div>-->
<!--                    </a>-->
<!--                    <p><a href="single.html">undoubtable</a></p>-->
<!--                </div>-->
<!--                <div class="clearfix"></div>-->
<!--            </div>-->
<!--            <div class="grid-in">-->
<!--                <div class="col-md-4 grid-top">-->
<!--                    <a href="single.html" class="b-link-stripe b-animate-go  thickbox"><img class="img-responsive"-->
<!--                                                                                            src="images/pi3.jpg" alt="">-->
<!--                        <div class="b-wrapper">-->
<!--                            <h3 class="b-animate b-from-left    b-delay03 ">-->
<!--                                <span>Shirt</span>-->
<!--                            </h3>-->
<!--                        </div>-->
<!--                    </a>-->
<!--                    <p><a href="single.html">suffered alteration</a></p>-->
<!--                </div>-->
<!--                <div class="col-md-4 grid-top">-->
<!--                    <a href="single.html" class="b-link-stripe b-animate-go  thickbox"><img class="img-responsive"-->
<!--                                                                                            src="images/pi4.jpg" alt="">-->
<!--                        <div class="b-wrapper">-->
<!--                            <h3 class="b-animate b-from-left    b-delay03 ">-->
<!--                                <span>Bag</span>-->
<!--                            </h3>-->
<!--                        </div>-->
<!--                    </a>-->
<!--                    <p><a href="single.html">Content here</a></p>-->
<!--                </div>-->
<!--                <div class="col-md-4 grid-top">-->
<!--                    <a href="single.html" class="b-link-stripe b-animate-go  thickbox"><img class="img-responsive"-->
<!--                                                                                            src="images/pi5.jpg" alt="">-->
<!--                        <div class="b-wrapper">-->
<!--                            <h3 class="b-animate b-from-left    b-delay03 ">-->
<!--                                <span>Shoe</span>-->
<!--                            </h3>-->
<!--                        </div>-->
<!--                    </a>-->
<!--                    <p><a href="single.html">readable content</a></p>-->
<!--                </div>-->
<!--                <div class="clearfix"></div>-->
<!--            </div>-->
<!--        </div>-->
<!--        &lt;!&ndash;-&ndash;&gt;-->

<!--        <div class="content-top-bottom">-->
<!--            <h2>Featured Collections</h2>-->
<!--            <div class="col-md-6 men">-->
<!--                <a href="single.html" class="b-link-stripe b-animate-go  thickbox"><img class="img-responsive"-->
<!--                                                                                        src="images/t1.jpg" alt="">-->
<!--                    <div class="b-wrapper">-->
<!--                        <h3 class="b-animate b-from-top top-in   b-delay03 ">-->
<!--                            <span>Lorem</span>-->
<!--                        </h3>-->
<!--                    </div>-->
<!--                </a>-->

<!--            </div>-->
<!--            <div class="col-md-6">-->
<!--                <div class="col-md1 ">-->
<!--                    <a href="single.html" class="b-link-stripe b-animate-go  thickbox"><img class="img-responsive"-->
<!--                                                                                            src="images/t2.jpg" alt="">-->
<!--                        <div class="b-wrapper">-->
<!--                            <h3 class="b-animate b-from-top top-in1   b-delay03 ">-->
<!--                                <span>Lorem</span>-->
<!--                            </h3>-->
<!--                        </div>-->
<!--                    </a>-->

<!--                </div>-->
<!--                <div class="col-md2">-->
<!--                    <div class="col-md-6 men1">-->
<!--                        <a href="single.html" class="b-link-stripe b-animate-go  thickbox"><img class="img-responsive"-->
<!--                                                                                                src="images/t3.jpg"-->
<!--                                                                                                alt="">-->
<!--                            <div class="b-wrapper">-->
<!--                                <h3 class="b-animate b-from-top top-in2   b-delay03 ">-->
<!--                                    <span>Lorem</span>-->
<!--                                </h3>-->
<!--                            </div>-->
<!--                        </a>-->

<!--                    </div>-->
<!--                    <div class="col-md-6 men2">-->
<!--                        <a href="single.html" class="b-link-stripe b-animate-go  thickbox"><img class="img-responsive"-->
<!--                                                                                                src="images/t4.jpg"-->
<!--                                                                                                alt="">-->
<!--                            <div class="b-wrapper">-->
<!--                                <h3 class="b-animate b-from-top top-in2   b-delay03 ">-->
<!--                                    <span>Lorem</span>-->
<!--                                </h3>-->
<!--                            </div>-->
<!--                        </a>-->

<!--                    </div>-->
<!--                    <div class="clearfix"></div>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="clearfix"></div>-->
<!--        </div>-->
<!--    </div>-->
<!--    &lt;!&ndash;&ndash;&gt;-->
<!--    <div class="content-bottom">-->
<!--        <ul>-->
<!--            <li><a href="#"><img class="img-responsive" src="images/lo.png" alt=""></a></li>-->
<!--            <li><a href="#"><img class="img-responsive" src="images/lo1.png" alt=""></a></li>-->
<!--            <li><a href="#"><img class="img-responsive" src="images/lo2.png" alt=""></a></li>-->
<!--            <li><a href="#"><img class="img-responsive" src="images/lo3.png" alt=""></a></li>-->
<!--            <li><a href="#"><img class="img-responsive" src="images/lo4.png" alt=""></a></li>-->
<!--            <li><a href="#"><img class="img-responsive" src="images/lo5.png" alt=""></a></li>-->
<!--            <div class="clearfix"></div>-->
<!--        </ul>-->
<!--    </div>-->
<!--</div>-->
<!--<div class="footer">-->
<!--    <div class="container">-->
<!--        <div class="footer-top-at">-->

<!--            <div class="col-md-4 amet-sed">-->
<!--                <h4>MORE INFO</h4>-->
<!--                <ul class="nav-bottom">-->
<!--                    <li><a href="#">How to order</a></li>-->
<!--                    <li><a href="#">FAQ</a></li>-->
<!--                    <li><a href="#">Location</a></li>-->
<!--                    <li><a href="#">Shipping</a></li>-->
<!--                    <li><a href="#">Membership</a></li>-->
<!--                </ul>-->
<!--            </div>-->
<!--            <div class="col-md-4 amet-sed ">-->
<!--                <h4>CONTACT US</h4>-->

<!--                <p>-->
<!--                    Contrary to popular belief</p>-->
<!--                <p>The standard chunk</p>-->
<!--                <p>office: +12 34 995 0792</p>-->
<!--                <ul class="social">-->
<!--                    <li><a href="#"><i> </i></a></li>-->
<!--                    <li><a href="#"><i class="twitter"> </i></a></li>-->
<!--                    <li><a href="#"><i class="rss"> </i></a></li>-->
<!--                    <li><a href="#"><i class="gmail"> </i></a></li>-->

<!--                </ul>-->
<!--            </div>-->
<!--            <div class="col-md-4 amet-sed">-->
<!--                <h4>Newsletter</h4>-->
<!--                <p>Sign Up to get all news update-->
<!--                    and promo</p>-->
<!--                <form>-->
<!--                    <input type="text" value="" onfocus="this.value='';"-->
<!--                           onblur="if (this.value == '') {this.value ='';}">-->
<!--                    <input type="submit" value="Sign up">-->
<!--                </form>-->
<!--            </div>-->
<!--            <div class="clearfix"></div>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="footer-class">-->
<!--        <p>Copyright &copy; 2015.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>-->
<!--        </p>-->
<!--    </div>-->
<!--</div>-->
<div class="footer">
    <div class="footer-class">
        <p><a>祝您购物愉快♥</a></p>
    </div>
</div>

<script src="layui/layui.all.js"></script>

<script>
    const $ = layui.$;

    function getCategory() {
        $.ajax({
            url: "index/list",
            data: {},
            async: false,
            success: function (data) {
                // $("[name='fenlei']").empty();

                for (let i = 0; i < data.length; i++) {

                    let aaa = "fenlei";
                    aaa = aaa + i;
                    $("[name='fenlei']").append("<li class='grid'><a class='color1'>"
                        + data[i].name + "</a><div class='mepanel'><div class='row'><div class='col1'><div class='h_nav'><ul class='  " + aaa + " ' lay-filter='navMenu" + i + "'>"
                        + "</ul></div></div></div></div></li>");

                }

                // element.render('nav', 'navMenu');

                for (let i = 0; i < data.length; i++) {

                    let aaa = ".fenlei";
                    aaa = aaa + i;
                    for (let j = 0; j < data[i].children.length; j++) {
                        $(aaa).append("<li><a href='shopping/goods?categoryid="+data[i].children[j].id+"'>" + data[i].children[j].name + "<\/a><\/li>");
                    }
                }


            }
        });
    }

    getCategory();


    // getChildren();
    //
    // function getChildren(){
    // 	$.ajax({
    // 		url:"index/list",
    // 		data:{},
    // 		async:false,
    // 		success:function(data){
    // 			for(let i=0;i<data.length;i++){
    //
    // 				let aaa=".fenlei";
    // 				aaa=aaa+i;
    // 				for(let j=0;j<data[i].children.length;j++) {
    // 					$(aaa).append("<li><a href='products.html'>"+data[i].children[j].name+"<\/a><\/li>");
    // 				}
    // 			}
    // 			// element.render('nav', 'navMenu' + i);
    //
    // 		}
    // 	});
    // }

    function easyCart() {
        $.ajax({
            url: "cart/list",
            data: {},
            async: false,
            success: function (cart) {
                let sumprice=0;
                let i=0;
                for (i = 0; i < cart.length; i++) {
                    sumprice+=(cart[i].number*cart[i].goods.price);
                }
                sumprice=Math.ceil(sumprice * 100) / 100;
                $(".total").html("<span>￥ &nbsp;&nbsp; "+sumprice+"</span>(<span>"+i+"</span>items)");
            }
        });
    }
    easyCart();

    $("[name='searchbtn']").click(function () {
        let searchtext=$("input[name='keywords']").val();
        location.href="shopping/goods?keywords="+searchtext;
    });


</script>
</body>
</html>
